<template>
  <div class="min-h-screen bg-gray-50 pt-32">
    <div class="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
      <div class="grid gap-12 lg:grid-cols-2">
        <!-- 左侧：联系信息 -->
        <div>
          <h2 class="mb-8 text-3xl font-bold" style="color: #555555">Kontaktoplysninger</h2>

          <div class="grid grid-cols-2 gap-12">
            <!-- 地址信息 -->
            <div class="flex flex-col items-start">
              <div class="mb-3 h-8 w-8">
                <svg class="h-8 w-8 text-teal-600" fill="currentColor" viewBox="0 0 24 24">
                  <path
                    d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
                  />
                </svg>
              </div>
              <div class="w-full">
                <!-- 诊所1 -->
                <div class="mb-12">
                  <div class="mb-2 font-bold text-gray-900">{{ clinic1Name }}</div>
                  <div class="text-sm" style="color: #7a7a7e">{{ clinic1Address }}</div>
                </div>

                <!-- 诊所2 -->
                <div>
                  <div class="mb-2 font-bold text-gray-900">{{ clinic2Name }}</div>
                  <div class="text-sm" style="color: #7a7a7e">{{ clinic2Address }}</div>
                </div>
              </div>
            </div>

            <!-- 营业时间 -->
            <div class="flex flex-col items-start">
              <div class="mb-3 h-8 w-8">
                <svg class="h-8 w-8 text-teal-600" fill="currentColor" viewBox="0 0 24 24">
                  <path
                    d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"
                  />
                </svg>
              </div>
              <div class="w-full">
                <div class="mb-2 font-bold text-gray-900">ÅBNINGSTIDER</div>
                <!-- 诊所1开放时间 -->
                <div class="mb-12 text-sm font-normal" style="color: #7a7a7e">
                  {{ clinic1OpenTime }}
                </div>
                <!-- 诊所2开放时间 -->
                <div class="text-sm font-normal" style="color: #7a7a7e">
                  {{ clinic2OpenTime }}
                </div>
              </div>
            </div>

            <!-- 邮箱 -->
            <div class="flex flex-col items-start">
              <div class="mb-3 h-8 w-8">
                <svg class="h-8 w-8 text-teal-600" fill="currentColor" viewBox="0 0 24 24">
                  <path
                    d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"
                  />
                </svg>
              </div>
              <div>
                <div class="mb-2 font-bold text-gray-900">E-MAIL</div>
                <div class="text-gray-700">info@zenix.nu</div>
              </div>
            </div>

            <!-- 电话 -->
            <div class="flex flex-col items-start">
              <div class="mb-3 h-8 w-8">
                <svg class="h-8 w-8 text-teal-600" fill="currentColor" viewBox="0 0 24 24">
                  <path
                    d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
                  />
                </svg>
              </div>
              <div>
                <div class="mb-2 font-bold text-gray-900">TELEFON</div>
                <div class="text-gray-700">55 60 88 80</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：发送消息表单 -->
        <div>
          <h2 class="mb-8 text-3xl font-bold" style="color: #555555">Send en besked</h2>

          <form @submit.prevent="submitForm" class="space-y-4">
            <!-- 姓名 -->
            <div>
              <label for="name" class="block text-left text-sm font-semibold text-gray-700">
                DIT NAVN
              </label>
              <input
                type="text"
                id="name"
                v-model="form.yourname"
                @blur="validateField('yourname')"
                class="border border-gray-300 px-2 py-1 transition-all duration-200 focus:outline-none focus:ring-0"
                style="width: 400px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);"
                placeholder=""
              />
              <div v-if="errors.yourname" class="error-bubble">
                <div class="error-arrow"></div>
                <div class="error-content">
                  UDFYLD VENLIGST DETTE FELT
                </div>
              </div>
            </div>

            <!-- 邮箱 -->
            <div>
              <label for="email" class="block text-left text-sm font-semibold text-gray-700">
                DIN E-MAIL
              </label>
              <input
                type="email"
                id="email"
                v-model="form.youremail"
                @blur="validateField('youremail')"
                class="border border-gray-300 px-2 py-1 transition-all duration-200 focus:outline-none focus:ring-0"
                style="width: 400px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);"
                placeholder=""
                title="Indtast venligst en gyldig e-mail adresse (f.eks. navn@domæne.dk)"
              />
              <div v-if="errors.youremail" class="error-bubble">
                <div class="error-arrow"></div>
                <div class="error-content">
                  UDFYLD VENLIGST DETTE FELT
                </div>
              </div>
            </div>

            <!-- 主题 -->
            <div>
              <label for="subject" class="block text-left text-sm font-semibold text-gray-700">
                EMNE
              </label>
              <input
                type="text"
                id="subject"
                v-model="form.theme"
                @blur="validateField('theme')"
                class="border border-gray-300 px-2 py-1 transition-all duration-200 focus:outline-none focus:ring-0"
                style="width: 400px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);"
                placeholder=""
              />
              <div v-if="errors.theme" class="error-bubble">
                <div class="error-arrow"></div>
                <div class="error-content">
                  UDFYLD VENLIGST DETTE FELT
                </div>
              </div>
            </div>

            <!-- 消息 -->
            <div>
              <label for="message" class="block text-left text-sm font-semibold text-gray-700">
                DIN BESKED (VALGFRI)
                <!-- 加载指示器 -->
                <div v-if="isSubmitting" class="inline-block ml-2">
                  <div class="animate-spin rounded-full h-4 w-4 border-2 border-gray-300 border-t-blue-600"></div>
                </div>
              </label>
              <textarea
                id="message"
                v-model="form.yourmessage"
                rows="4"
                class="resize-none border border-gray-300 px-2 py-1 transition-all duration-200 focus:outline-none focus:ring-0"
                style="width: 400px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);"
                placeholder=""
              ></textarea>
            </div>

            <!-- 发送按钮 -->
            <button
              type="submit"
              :disabled="isSubmitting"
              class="rounded-none px-5 py-2 font-semibold text-white transition-colors"
              style="background-color: #3c5576;"
            >
              <span v-if="isSubmitting">Sender...</span>
              <span v-else>SEND</span>
            </button>

            <!-- 状态提示框 -->
            <div v-if="statusMessage" class="mt-4 p-4 rounded-lg border-2" :class="statusMessage.type === 'success' ? 'border-green-500' : 'border-red-500'">
              <div class="text-sm font-medium" :class="statusMessage.type === 'success' ? 'text-green-800' : 'text-red-800'">
                {{ statusMessage.text }}
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getAllClinicInfo, sendMessage } from "../api/kontaktOs";

interface ContactForm {
  yourname: string;
  youremail: string;
  theme: string;
  yourmessage: string;
}

// 诊所信息响应式变量 - 为每个诊所创建独立的变量
const clinic1Name = ref("");
const clinic1Address = ref("");
const clinic1OpenTime = ref("");

const clinic2Name = ref("");
const clinic2Address = ref("");
const clinic2OpenTime = ref("");

const form = ref<ContactForm>({
  yourname: "",
  youremail: "",
  theme: "",
  yourmessage: "",
});

// 错误状态管理
const errors = ref({
  yourname: "",
  youremail: "",
  theme: "",
});

const isSubmitting = ref(false);

// 状态消息
const statusMessage = ref<{ type: 'success' | 'error'; text: string } | null>(null);

// 获取所有诊所信息
const fetchClinics = async () => {
  try {
    const response = await getAllClinicInfo();
    console.log("诊所信息响应:", response);

    // 处理获取到的诊所信息
    if (response && response.data && Array.isArray(response.data)) {
      const clinics = response.data;

      // 根据ID获取诊所信息
      const clinic1 = clinics.find((clinic) => clinic.id === 1);
      const clinic2 = clinics.find((clinic) => clinic.id === 2);

      if (clinic1) {
        console.log("诊所1信息:", clinic1);
        // 设置诊所1的信息
        clinic1Name.value = clinic1.clinicname;
        clinic1Address.value = clinic1.address;
        clinic1OpenTime.value = clinic1.opentime_text;
      }

      if (clinic2) {
        console.log("诊所2信息:", clinic2);
        // 设置诊所2的信息
        clinic2Name.value = clinic2.clinicname;
        clinic2Address.value = clinic2.address;
        clinic2OpenTime.value = clinic2.opentime_text;
      }

      console.log("获取到的诊所数据:", clinics);
    } else {
      console.warn("意外的API响应格式:", response);
    }
  } catch (err) {
    console.error("获取诊所信息失败:", err);
  }
};

// 页面加载时获取诊所信息
onMounted(() => {
  fetchClinics();
});

// 字段验证函数
const validateField = (fieldName: keyof typeof errors.value) => {
  const value = form.value[fieldName];
  if (!value || value.trim() === "") {
    errors.value[fieldName] = "UDFYLD VENLIGST DETTE FELT";
  } else {
    errors.value[fieldName] = "";
  }
};

const submitForm = async () => {
  // 验证所有必填字段
  validateField('yourname');
  validateField('youremail');
  validateField('theme');
  
  // 如果有错误，不提交
  if (errors.value.yourname || errors.value.youremail || errors.value.theme) {
    return;
  }

  isSubmitting.value = true;
  statusMessage.value = null; // 清除之前的状态消息

  try {
    // 调用发送消息接口
    const response = await sendMessage({
      yourname: form.value.yourname,
      youremail: form.value.youremail,
      theme: form.value.theme,
      yourmessage: form.value.yourmessage
    });

    console.log("消息发送成功:", response);

    // 显示成功消息
    statusMessage.value = {
      type: 'success',
      text: 'Sendet succesfully'
    };

    // 重置表单
    form.value = {
      yourname: "",
      youremail: "",
      theme: "",
      yourmessage: "",
    };

    // 清空错误状态
    errors.value = {
      yourname: "",
      youremail: "",
      theme: "",
    };

    // 3秒后自动清除成功消息
    setTimeout(() => {
      statusMessage.value = null;
    }, 3000);

  } catch (error) {
    console.error("发送消息失败:", error);
    
    // 显示失败消息
    statusMessage.value = {
      type: 'error',
      text: 'DER OPSTOD EN FEJL UNDER FORSØG PÅ AT SENDE DIN BESKED. PRØV VENLIGST IGEN SENERE.'
    };
  } finally {
    isSubmitting.value = false;
  }
};
</script>

<style scoped>
/* 联系页面特定样式 */
input:focus, textarea:focus {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) !important;
}

/* 错误提示气泡样式 */
.error-bubble {
  position: relative;
  margin-top: 8px;
}

.error-arrow {
  position: absolute;
  top: -8px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #f3f3f3;
}

.error-content {
  background-color: #f3f3f3;
  color: #dc2626;
  padding: 1px 12px;
  font-size: 14px;
  font-weight: 500;
  max-width: 300px;
  word-wrap: break-word;
}
</style>
